<template>
    <div id="InventoryList">
        <el-card>
           
            <el-row>
                <el-col :span="21">
                    <div class="grid-content" style="display: flex;">
                        <el-select class="select-prefix" style="margin-right: 4px;" size="mini" v-model="warehouseId" placeholder="请选择仓库" filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择仓库</span>
                            </template>
                            <el-option
                                v-for="item in warehouseList"
                                :key="item.warehouseId"
                                :label="item.warehouseName"
                                :value="item.warehouseId">
                            </el-option>  
                        </el-select>
                        <el-select class="select-prefix" style="margin-right: 4px;" size="mini" v-model="isCheckedAll" placeholder="请选择盘库类型" filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择类型</span>
                            </template>
                            <el-option :value="2" label="全部"></el-option>
                            <el-option :value="0" label="抽盘"></el-option> 
                            <el-option :value="1" label="全盘"></el-option> 
                        </el-select>
                        <el-select class="select-prefix" style="margin-right: 4px;" size="mini" v-model="isCompleted" placeholder="请选择状态" filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择状态</span>
                            </template>
                            <el-option :value="2" label="全部"></el-option>
                            <el-option :value="0" label="未完成"></el-option> 
                            <el-option :value="1" label="已完成"></el-option> 
                        </el-select>
                        <el-date-picker
                        style="width: 260px"
                            size="mini"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="handleChangeSearch"
                            >
                            </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content col_float_right">
                        <el-button size="mini" type="primary" @click="isShow= true">新建盘库任务</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="单号" prop="countOrderId"></el-table-column>
                <el-table-column label="仓库" prop="warehouseName"></el-table-column>
                <el-table-column label="类型" prop="countType">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.countType == 1 ? 'danger' : 'success'">
                            {{scope.row.countType == 0 ? '全盘' : '抽盘'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="isCompleted">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.isCompleted == 0 ? 'danger' : 'success'">
                            {{scope.row.isCompleted == 1 ? '已完成' : '未完成'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="品牌数量" prop="totalBrand">
                    <template slot-scope="scope">
                        <el-popover
                        placement="right"
                        width="150"
                        offset="0"
                        trigger="click">
                            <ul v-if="brandData.length > 0">
                                <li v-for="(item, index) in brandData " :key="index" style=" font-size: 12px; color: #ff7068; border-bottom: 1px solid #eee; margin-bottom: 2px;" >
                                    {{item.brandName}}
                                </li>
                            </ul>
                            <el-button slot="reference" type="text" size="small" @click="getBrandListById(scope.row)">
                                {{scope.row.totalBrand}}
                            </el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="库存总数" prop="totalStock"></el-table-column>
                <el-table-column label="盘点总数" prop="countQty"></el-table-column>
                <el-table-column label="盘库时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{scope.row.gmtBegin}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="盈亏" >
                    <template slot-scope="scope">
                        <span>{{scope.row.totalOver !=null ? scope.row.totalOver : '-'}} / {{scope.row.totalLost !=null ? scope.row.totalLost : '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                                <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" >
                                    <el-dropdown-item command="a" @click.native="handleClickCheck(scope.row)">查看</el-dropdown-item>
                                    <!-- <el-dropdown-item command="b" @click.native="handleClickEdit(scope.row)">编辑</el-dropdown-item> -->
                                    <el-dropdown-item command="c" @click.native="handleClickDel(scope.row)">删除</el-dropdown-item>
                                    <el-dropdown-item command="d" v-if="scope.row.isCompleted == 1" @click.native="handleClickDownload(scope.row)">下载</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <createInventoryTpl v-if="isShow" isShow @cancelShow="cancelShow" @getInventoryList="getInventoryList"></createInventoryTpl>
    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import createInventoryTpl from './inventoryTpl'
    export default {
        components: {page, createInventoryTpl},
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                tableData: [],
                warehouseId: '',
                isCompleted: 2,
                isCheckedAll: 2,
                time: [],
                isShow: false,
                warehouseList: [],
                brandData: []
            }
        },
        mounted() {
            this.getStockList()
            this.getInventoryList()
        },
        methods: {
            /** 获取仓库列表 */
            getStockList() {
                this.$server.storeWarehouseController.getAllWarehouseList().then(res => {
                    this.warehouseList= res.data
                })
            },
            /**盘点单列表 */
            getInventoryList() {
                let params= {
                    page: this.page,
                    size: this.size,
                    gmtBegin: this.time && this.time.length > 0 ? this.formate(new Date(this.time[0].getTime()), 'yyyy-MM-dd hh:mm:ss') : '',
                    gmtEnd: this.time && this.time.length > 0 ? this.formate(new Date(this.time[1].getTime()), 'yyyy-MM-dd hh:mm:ss') : '',
                    countType: this.isCheckedAll !=2 ?  this.isCheckedAll : '',
                    isCompleted: this.isCompleted != 2 ? this.isCompleted : '',
                    warehouseId: this.warehouseId !='' ? this.warehouseId: ''
                }
                this.$server.stockControlApi.getInventoryList(params).then(res => {
                    this.total= res.total
                    this.tableData= res.data
                })
            },
            /**盘点单对应品牌 */
            getBrandListById(scope) {
                this.$server.stockControlApi.getBrandById(scope.countId).then(res => {
                    this.brandData= res.data
                })
            },
            handlePageChange(val) {
                this.page= val
                this.total= 0
                this.getInventoryList()
            },
            handleSizeChange(val) {
                this.size= val
                this.total= 0
                this.getInventoryList()
            },
            cancelShow(val) {
                this.isShow= val
            },
            handleChangeSearch(){
                this.page= 1
                this.total= 0
                this.getInventoryList()
            },
            /**盘点单查看 */
            handleClickCheck(scope) {},
            /**盘点单删除 */
            handleClickDel(scope) {
                this.$confirm('确定删除该盘点单？').then(_ => {
                    this.$server.stockControlApi.delInventoryById(scope.countId).then(res => {
                        this.getInventoryList()
                    })
                }).catch()
            },
            // 盘点单下载
            handleClickDownload(scope) {
                 let obj= {
                    url: process.env.BASE_API + '/youbao/stock/api/stock/count/order/info/' + scope.countId,
                    name: '盘点单'+ scope.countOrderId
                }
                this.$server.excelApi.downLoadExcel(obj)
            }
        }
    }
</script>